<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>html-sketchapp - Backgrounds</title>
  <style>
    .bg-color {
      width: 200px;
      height: 200px;
      background: green;
    }

    .bg-gradient {
      width: 200px;
      height: 200px;
      background: linear-gradient(red, yellow);
    }

    .bg-image-simple {
      width: 200px;
      height: 200px;
      background: url(./assets/blue.jpg);
      background-size: cover;
    }

    .bg-image {
      width: 100px;
      height: 100px;
      background: url(./assets/chess.png) no-repeat;
    }

    .bg-position {
      background-position: -300px -100px;
    }

    .bg-position-and-size {
      background-size: 200px;
      background-position: -100px 0;
    }

    .bg-size {
      background-size: 200px;
    }

    .bg-size-two-val {
      background-size: 200px 200px;
    }

    .bg-size-percentage {
      background-size: 50% 50%;
    }

    .bg-size-cover {
      background-size: cover;
    }

    .bg-size-contain {
      background-size: contain;
    }
  </style>
</head>

<body>
  <div class='bg-color'></div>
  <div class='bg-gradient'></div>
  <div class='bg-image-simple'></div>
  <div class='bg-image bg-position'></div>
  <div class='bg-image bg-position-and-size'></div>
  <div class='bg-image bg-size'></div>
  <div class='bg-image bg-size-two-val'></div>
  <div class='bg-image bg-size-percentage'></div>
  <div class='bg-image bg-size-cover'></div>
  <div class='bg-image bg-size-contain'></div>
</body>

</html>
